<template>
	<view class="drawing_page">
		<nav-bar title="提现"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="select_drawing_box">
			<view class="title">提现方式 <text @click="onPageJump('/pagesMy/my/wallet/paymentMethod')">修改提现信息</text></view>
			<view class="select_box" @click="onPageJump('/pagesMy/my/wallet/paymentMethod?type=select')">
				<view v-if="paymentMethod == 1101">
					<image src="../../../static/icon/zhifubao.png" mode="aspectFit"></image>
					支付宝
				</view>
				<view v-else-if="paymentMethod == 1102">
					<image src="../../../static/icon/wechat.png" mode="aspectFit"></image>
					微信
				</view>
				<view v-else-if="paymentMethod == 1103">
					<image src="../../../static/icon/card2.png" mode="aspectFit"></image>
					银行卡
				</view>
				<view v-else>请绑定提现方式</view>
				<text class="arrow"></text>
			</view>
		</view>
		<view class="drawing_box">
			<view class="title">提现金额</view>
			<view class="input_box">
				￥
				<input type="digit" v-model="money" placeholder="请输入提现金额" />
			</view>
			<view class="total_sum_box">
				<view>
					可提现：
					<text>￥{{balance}}</text>
				</view>
				<text @click="onAllMoney">全部</text>
			</view>
			<view class="tips">注：提现金额会在3-5个工作日发送到提现的账户上</view>
			<view class="tips red" v-if="type == 'sheng'">提现需扣6%手续费</view>
			<button @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			balance:0,
			money:"",
			type:""
		};
	},
	computed: {
		...mapState(['paymentMethod'])
	},
	//第一次加载
	onLoad(e) {
		if(e.type){
			this.type = e.type;
		}
	},
	//页面显示
	onShow() {
		this.pageData();
	},
	//方法
	methods: {
		pageData() {
			this.$http
				.get('api/mime/wallet/v1/info')
				.then(res => {
					this.balance = res.freeMoney;
				});
		},
		onAllMoney(){
			this.money = this.balance;
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onSubmit(){
			if (!this.paymentMethod) {
				uni.showToast({
					title: '请选择提现方式',
					icon: 'none'
				});
				return;
			}
			if (!this.money) {
				uni.showToast({
					title: '请输入提现金额',
					icon: 'none'
				});
				return;
			}
			if (this.money > this.balance) {
				uni.showToast({
					title: '提现金额不能大于可提现余额',
					icon: 'none'
				});
				return;
			}
			this.$http
				.post('api/mime/v1/withdraw', {
					type:this.paymentMethod,
					money:this.money,
				})
				.then(res => {
					uni.showToast({
						title:"提现申请提交成功，等待管理员审核",
						icon:"none",
						success: () => {
							setTimeout(()=> {
								uni.navigateBack();
							},2000)
						}
					})
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background-color: #f5f5f5;
}
.drawing_page {
	padding: 30rpx;
	height: 100vh;
	background-color: #f5f5f5;
	.drawing_box {
		background-color: #ffffff;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(44, 44, 44, 0.1);
		border-radius: 8rpx;
		padding: 40rpx 30rpx;
		.title {
			font-size: 24rpx;
			color: #555555;
		}
		.input_box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-bottom: 2rpx solid #e5e5e5;
			color: #555555;
			font-size: 36rpx;
			display: flex;
			align-items: flex-end;
			input {
				font-size: 60rpx;
				height: 60rpx;
				color: #555555;
				flex: 1;
				margin-left: 10rpx;
			}
		}
		.total_sum_box {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #555555;
			> view {
				text {
					color: #ff3d3d;
				}
			}
		}
		.tips {
			margin-top: 40rpx;
			font-size: 24rpx;
			color: #999999;
		}
		.red{
			margin-left: 48rpx;
			margin-top: 12rpx;
			color: #ff3d3d;
		}
		button {
			margin-top: 60rpx;
			height: 80rpx;
			background-color: $themeColor;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 80rpx;
		}
	}
}
.select_drawing_box {
	background-color: #ffffff;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(44, 44, 44, 0.1);
	border-radius: 8rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	.title {
		font-size: 24rpx;
		color: #555555;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.select_box {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			font-size: 28rpx;
			color: #555555;
			display: flex;
			align-items: center;
			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
		}
		.arrow {
			@include bis('../../../static/icon/icon_enter.png');
			width: 12rpx;
			height: 20rpx;
		}
	}
}
</style>
